import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { WingBlank, WhiteSpace, InputItem, Button, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import styles from '../scale/styles.less';

const Mobile = ({ dispatch, form, location, btn, wait, isDisabled, clock, backGround, ...rest }) => {
  const { getFieldProps, getFieldValue, getFieldError, validateFields } = form;
  
  if (!getFieldValue('mobile')) {
     clearInterval(clock);
     btn = "获取验证码";
     isDisabled = false;
     backGround = "#aa4929";
     dispatch({ 
      type: 'account/save', 
      payload: { 
          btn: btn, clock: clock,
          backGround: backGround, 
          isDisabled: isDisabled 
     }});
     // 当每次进入该页面时把button的设为"获取验证码"
  }
  const sendSmsCode = () =>// 点击获取验证码
    validateFields((errors, value) => {
       if (!getFieldValue('mobile')) {
          return Toast.fail('请输入正确手机号');
       }
      if(wait == 60){
          dispatch({
            type: 'account/sendSmsCode',
            payload: { 
              mobile: getFieldValue('mobile') 
            },
          });
          isDisabled = true;
          dispatch({ 
            type: 'account/save', 
            payload: { 
              wait, isDisabled
          }})    
      }
      btn = '重新获取'+wait;
      clock = setInterval(doLoop,1000);
      isDisabled = true;
      dispatch({ 
        type: 'account/save', 
        payload: { 
          clock: clock, 
          isDisabled: isDisabled 
      }});
    })
 function doLoop(){// 验证码倒计时
    backGround = "#727171";
    dispatch({ 
      type: 'account/save', 
      payload: { 
        backGround: backGround, 
        wait: wait--
    }});
    if(wait > 0){
        btn = '重新获取'+wait;
        dispatch({ 
          type: 'account/save', 
          payload: { 
            btn, wait: wait
        }});
    }else{
      clearInterval(clock);
      isDisabled = false;
      backGround = "#aa4929";
      btn = '获取验证码';
      wait = 60;
      dispatch({ 
        type: 'account/save', 
        payload: { 
          backGround: backGround, 
          btn: btn, wait: wait, 
          isDisabled: isDisabled
      }});
    }
  }
  const checkSmsCode = () => validateFields((errors, value) => {
    clearInterval(clock);
    backGround = "#aa4929";
    btn = '获取验证码';
    wait = 60;
    isDisabled = false;
    dispatch({ 
      type: 'account/save', 
      payload: { 
        backGround: backGround, 
        btn: btn, wait: wait, 
        clock:clock, isDisabled:isDisabled
    }});
    // 保存的时候也重置一下。
    if (errors) {
      const fieldNames = Object.keys(errors);
      if (fieldNames[0]) {
        return Toast.fail(getFieldError(fieldNames[0]));
      }
    }

    let type = location.state.type;
    const data = { ...value, type };

    // 原手机号和验证码，防止暴力破解
    const { mobile, code } = location.state;

    if (mobile && code) {
      data.mobile = data.mobile.split(' ').join('');
      data.oldMobile = mobile.split(' ').join('');
      data.oldCode = code;
    }

    dispatch({
      type: rest.actionType || 'account/checkSmsCode',
      payload: {
        ...data,
        redirectUrl: rest.redirectUrl,
      },
    });
    localStorage.removeItem('gyhluser'+sessionStorage.getItem("hid"));
    localStorage.setItem('gyhluser'+sessionStorage.getItem("hid"), value.mobile.split(' ').join(''));
  });

  return (
    <WingBlank size="md">
      <WhiteSpace size="xl" />
      <InputItem
        type="phone"
        clear
        {...getFieldProps('mobile', {
          validate: [{
            trigger: false,
            rules: [{ required: true, message: '请输入手机号' }],
          }],
        })}
        placeholder="请输入手机号"
      />
      <InputItem
        {...getFieldProps('code', {
          validate: [{
            trigger: false,
            rules: [{ required: true, message: '请输入验证码' }],
          }],
        })}
        placeholder="请输入验证码"
        extra={
          <Button
            type="primary"
            size="small"
            onClick={sendSmsCode}
            disabled={isDisabled}
            style={{background:backGround}}
          >{btn}
          </Button>
        }
      />
      <WhiteSpace size="md" />
      <Button
        type="primary"
        onClick={checkSmsCode} 
      >
        {rest.buttonText || '保存'}
      </Button>
    </WingBlank>
  );
};

export default connect(({ account }) => ({
  ...account,
}))(createForm()(Mobile));
